<template>
  <div class="project-detail">
    <el-form ref="form" :rules="rules" :model="form"  label-width="180px" size="media" :disabled="ifFind">
      <el-row :gutter="10">
      <el-col :span="9" v-show="ifFind">
        <el-form-item label="ID" prop="ID">
          <el-input v-model.trim="form.ID" prefix-icon="el-icon-info" style="width:100%" :disabled="true"/>
        </el-form-item>
      </el-col>
      <el-col :span="9" v-show="ifFind">
        <el-form-item label="创建时间" prop="CreatedAt">
          <el-input v-model="form.CreatedAt" prefix-icon="el-icon-info" style="width:100%" :disabled="true"/>
        </el-form-item>
      </el-col>
      <el-col :span="9">
        <el-form-item label="项目编号" prop="project_code" >
          <el-input v-model.trim="form.project_code" style="width:100%" prefix-icon="el-icon-info" :disabled="true" />
        </el-form-item>
      </el-col>
      <el-col :span="9">
        <el-form-item label="公司" prop="company_code" style="width:100%" >
          <el-select  placeholder="请选择公司" v-model="form.company_code" style="width:100%">
            <el-option
                    v-for="(item, i) in companyOptions"
                    :key="i"
                    :label="item.company_name"
                    :value="item.company_code"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-col>

      <el-col :span="9">
        <el-form-item label="项目名称(如:xx-xx)" prop="project_name">
          <el-input v-model.trim="form.project_name" prefix-icon="el-icon-info" style="width:100%" @input="fillProjectCode" />
        </el-form-item>
      </el-col>
      <el-col :span="9">
        <el-form-item label="项目全称(中文格式)" prop="project_fullname">
          <el-input v-model.trim="form.project_fullname" prefix-icon="el-icon-info" style="width:100%"/>
        </el-form-item>
      </el-col>

      <el-col :span="9">
        <el-form-item label="项目经理" prop="project_manager" style="width:100%">
          <el-select  placeholder="请选择项项目经理" filterable v-model="form.project_manager" style="width:100%">
            <el-option
                    v-for="(item, i) in userOptions"
                    :key="i"
                    :label="item.nick_name"
                    :value="item.nick_name"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="9">
        <el-form-item label="项目开发" prop="project_develop" style="width:100%">
          <el-select  placeholder="请选择项项目经理" filterable v-model="form.project_develop" style="width:100%">
            <el-option
                    v-for="(item, i) in userOptions"
                    :key="i"
                    :label="item.nick_name"
                    :value="item.nick_name"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="9">
        <el-form-item label="项目主运维" prop="operations_master" style="width:100%">
          <el-select  placeholder="请选择项项目经理" filterable v-model="form.operations_master" style="width:100%">
            <el-option
                    v-for="(item, i) in userOptions"
                    :key="i"
                    :label="item.nick_name"
                    :value="item.nick_name"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="9">
        <el-form-item label="项目备运维" prop="operations_slave" style="width: 100%">
          <el-select  placeholder="请选择项项目经理" filterable v-model="form.operations_slave" style="width:100%">
            <el-option
                    v-for="(item, i) in userOptions"
                    :key="i"
                    :label="item.nick_name"
                    :value="item.nick_name"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-col>

      <el-col :span="9">
        <el-form-item label="项目归属" prop="project_attribute" style="width:100%">
          <el-select  placeholder="请选择项目归属" v-model="form.project_attribute" style="width:100%">
            <el-option
                    v-for="(item, i) in attributeOptions"
                    :key="i"
                    :label="item.item_name"
                    :value="item.item_value"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="9">
        <el-form-item label="项目开发语言" prop="develop_language" style="width:100%">
          <el-select  placeholder="请选择项目归属" v-model="form.develop_language" style="width:100%">
            <el-option
                    v-for="(item, i) in languageOptions"
                    :key="i"
                    :label="item.item_name"
                    :value="item.item_value"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="9">
        <el-form-item label="上线日期" prop="online_time" style="width:100%">
          <el-date-picker
                  v-model="form.online_time"
                  type="date"
                  placeholder="选择日期" style="width:100%">
          </el-date-picker>
        </el-form-item>
      </el-col>
      <el-col :span="9">
        <el-form-item label="状态" prop="status">
          <el-radio-group v-model="form.status">
            <el-radio
                    v-for="dict in statusOptions"
                    :key="dict.item_value"
                    :label="dict.item_value |formatBoolean"
            >{{ dict.item_name }}</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-col>
      </el-row>
    </el-form>
    <div class="bottom-button" style="display: block;margin-left: 180px;width: 120px">
      <el-button v-if="!ifFind" type="primary" size="medium" @click="onSubmit">保存</el-button>
      <el-button v-else :disabled="true" type="primary" size="medium" @click="onSubmit">保存</el-button>
      <el-button size="medium" @click="goBack">取消</el-button>
    </div>

  </div>
</template>

<script>
  import {
    getProjectById,
    createProject,
    updateProject,
  } from "@/api/cmdb_project";
  import { formatTimeToStr } from '@/utils/date';
  import { getCompany } from "@/api/company";
  import infoList from '@/mixins/infoList';
  import { getUserList } from "@/api/user";
  export default {
    name: "projectDetail",
    mixins: [infoList],
    data() {
      return {
        companyOptions: [],
        statusOptions:[],
        languageOptions: [],  // 编程语言选项 - 数据来自字典
        attributeOptions: [], // 项目归属选项 - 数据来自字典
        userOptions: [],    // 用户列表选项
        form: {
          ID: '',
          project_code: '',
          project_name: '',
          project_fullname: '',
          project_manager: '',
          project_develop: '',
          operations_master:'',
          operations_slave:'',
          develop_language:'',
          project_attribute:'',
          company_code: '',
          online_time: new Date(),
          CreatedAt: null,   // 不能设置成 ''  时间格式要传递post到后端
          status: true,
        },
        ifFind: false,
        // 操作类型
        opType: '',   // find|edit|crate
        rules: {
          company_code: [{ required: true, message: '请选择公司', trigger: 'blur' }],
          project_name: [{ required: true, message: '请正确输入项目名称', pattern: /^[a-zA-Z0-9|-]*$/,trigger: 'blur' }],
          project_fullname: [{ required: true, message: '请输入公司全称',trigger: 'blur' }],
          project_manager: [{ required: true, message: '请选择项目经理',trigger: 'blur' }],
          project_develop: [{ required: true, message: '请选择项目开发',trigger: 'blur' }],
          operations_master: [{ required: true, message: '请选择项目运维',trigger: 'blur' }],
          operations_slave: [{ required: true, message: '请选择项目运维',trigger: 'blur' }],
          project_attribute: [{ required: true, message: '请选择项目归属',trigger: 'blur' }],
          develop_language: [{ required: true, message: '请选择开发语言',trigger: 'blur' }],
          online_time: [{required: true, message: '请选择时间',trigger: 'blur' }],
        },
      }
    },
    filters: {
      formatDate: function(time) {
        if (time != null && time != '') {
          var date = new Date(time)
          return formatTimeToStr(date, 'yyyy-MM-dd hh:mm:ss')
        } else {
          return ''
        }
      },
      formatBoolean: function(s) {
        if (s == "1" ) {
          return true
        } else {
          return false;
        }
      },

    },
    created() {
      const id = this.$route.query.id
      if (id != null) {
        this.queryDetail(id)
      }
      // 路由参数(页面操作类型) find|create|edit
      this.opType = this.$route.query.type
      if (this.opType == 'find') {
        this.ifFind = true
      }
      // 获取公司列表
      getCompany().then(response => {
        this.companyOptions = response.data.companyList;
      })

      this.statusOptions = this.getDicItemList('sys_common_status')
      this.attributeOptions = this.getDicItemList('project_attribute')
      this.languageOptions = this.getDicItemList('programming_language')

      if (this.opType != 'find') {
        // 获取用户列表 - 后续优化
        getUserList({'page':1, 'pageSize': 100}).then(res => {
          // console.log(res.data.list)  // 获取用户列表
          this.userOptions = res.data.list
        })
      }

    },
    methods: {
      queryDetail(id) {
        getProjectById({id: parseInt(id)}).then(res => {
          if (res.code == 0) {
            this.form = res.data.project
          }
          })
      },
      async createProject(){
        createProject(this.form).then(res => {
          if (res.code == 0) {
            this.$message({
              type: 'success',
              message: '创建成功',
            })
            this.$router.push({ name: 'project'})
          }
        })
      },
      updateProject() {
        updateProject(this.form).then(res => {
          if (res.code == 0) {
            this.$message({
              type: 'success',
              message: '更新成功',
            })
            this.$router.push({ name: 'project'})
          }
        })

      },
      goBack() {
        this.$router.go(-1)
      },
      onSubmit() {
        this.$refs['form'].validate((valid) => {
          if (!valid) {
            return
          }
          // 编辑 提交
        if (this.opType == 'edit') {
          this.updateProject()

          // 新建
        } else if (this.opType == 'create') {
          this.createProject()
        } else {
          this.$message({
            type: 'error',
            message: '未知操作类型',
          })
        }
        })
      },
      fillProjectCode() {
        this.form.project_code = this.form.project_name
      }

    }
  }
</script>

<style scoped lang="scss">
.project-detail {
.el-input {
  width: 400px;   // 后续优化
}
}
</style>
